<template>
  <div class="footer-wrap">
    <div class="footer-tip">
      <div class="footer-icons w-1400">
        <div class="icon-item" v-for="(item, index) in footerTips" :key="index">
          <div class="icon-box">
            <img :src="item.icon" alt="" />
          </div>
          <div class="info-box">
            <div class="title">{{ item.title }}</div>
            <div class="desc">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="page-footer">
      <div class="web-footer w-1400">
        <!-- 底部链接 -->
        <div class="web-footer-item">
          <img class="web-footer-img" src="@/assets/newImg/home/location.png" alt=""/>
          <div>
            <div class="web-footer-name">公司地址</div>
            <div class="web-footer-title">湖南省长沙市芙蓉区隆园一路三号</div>
          </div>
        </div>

        <div class="web-footer-item">
          <img class="web-footer-img" src="@/assets/newImg/home/telphone.png" alt=""/>
          <div>
            <div class="web-footer-name">全国服务热线</div>
            <div class="web-footer-title">0731- 85828039</div>
          </div>
        </div>

        <div class="web-footer-item">
          <img class="web-footer-img" src="@/assets/newImg/home/mailbox.png" alt=""/>
          <div>
            <div class="web-footer-name">期待您的来信</div>
            <div class="web-footer-title">dexinggongcheng@188.com</div>
          </div>
        </div>

      </div>

      <div class="beian-box">
        <div class="beian" >
          互联网药品信息服务资格证书  证书编号：(冀)-经营性-2018-0003   |   药品网络交易第三方平台备案证：(冀) 网药平台备字 (2023) 0001号  |  产品质量安全公告
        </div>
        <div class="contact-info flex-center">
          Copyright ©  2025 湖南老百姓药简单科技有限公司版权所有  冀ICP备******号   
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "web-footer",
  components: {},
  props: [],
  data() {
    return {
      footerTips: [
        {
          icon: require("@/assets/newImg/home/zhengping.png"),
          title: "正品保障",
          desc: "所有商品100%正品",
        },
        {
          icon: require("@/assets/newImg/home/yinsi.png"),
          title: "隐私保护",
          desc: "客户信息保护",
        },
        {
          icon: require("@/assets/newImg/home/icon04@2x.png"),
          title: "全网比价",
          desc: "全网比价 惠到实处",
        },
        {
          icon: require("@/assets/newImg/home/icon05@2x.png"),
          title: "药师咨询",
          desc: "专业团队 无忧订购",
        },
      ],
      footer_link_group: [],
    };
  },
  computed: {
    // ...mapState([""]),
  },
  watch: {},

  created() {
    this.query_footer_link();
  },
  methods: {
    query_footer_link() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "news_getIndexFooter",
          channelId: 52,
          page: 1,
          pageNum: 1000,
          orderType: 0, //排序情况：0-自然排序 1-最新
        },
      }).then((res) => {
        if (res.code == 200) {
          this.footer_link_group = res.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.footer-tip {
  width: 100%;
  height: 140px;
  background: #2E323F;;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ABADB2;

  .footer-icons {
    display: flex;

    .icon-item {
      flex: 1;
      text-align: left;
      display: flex;
      align-items: center;

      .icon-box {
        img {
          width: 46px;
          height: 52px;
        }
      }

      .info-box {
        flex: 1;
        padding-left: 15px;

        .title {
          margin-bottom: 10px;
          font-size: 18px;
          font-family: PingFang SC, PingFang SC;
          // font-weight: bold;
          color: #ffffff;
        }

        .desc {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #fff;
        }
      }
    }
  }
}

.page-footer {
  // background: url("~@img/footer-bg.jpg") no-repeat center / cover;
  background: #2E323F;
  height: 168px;
}

.web-footer {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-items: center;
  background: #2E323F;
  height: 168px;
  

  .web-footer-item {
    display: flex;
    align-items: center;
    
  }

  .web-footer-img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    
  }

  .web-footer-name{
    font-weight: 500;
    font-size: 16px;
    color: #B8B8B8;
  }
  .web-footer-title{
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 20px;
  }

  .link-wrap {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    justify-content: space-between;
    align-items: flex-start;
    padding-right: 140px;

    .link-group {
      .group-title {
        text-align: left;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #000000;
      }

      .link-item {
        text-align: left;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 32px;

        a {
          font-weight: normal;
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: normal;
          font-size: 14px;
          color: #666666;
          line-height: 30px;

          &:hover {
            color: #009f39;
          }
        }
      }
    }
  }
}

.link-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .site-info {
    .info-box {
      margin-right: 120px;
      display: flex;
      align-items: flex-start;

      .phone-icon-box {
        img {
          width: 48.43px;
        }
      }
      .text-box {
        padding-left: 12px;
        .mobile-text {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
        .mobile {
          margin: 10px 0 25px 0;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 26px;
          color: #ff7600;
        }
        .time-text {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
        .time {
          margin-top: 10px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #707070;
        }
      }
    }

    .icon-box {
      img {
        width: 100px;
        height: 100px;
      }

      .icon-title {
        margin-top: 16px;
        text-align: center;
      }
    }
  }
}

.beian-box {
  text-align: center;
  height: 86px;
  background: #2E323F;
  border-top: 1px solid #ABADB2;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  

  .beian {
    text-align: center;
    color: #fff;
  }

  .contact-info {
  color: #fff;
  }

}



@media screen and (max-width: 1024px) {
  .footer-tip {
    padding: 15px;

    .footer-icons {
      width: 100%;
      flex-direction: column;

      .icon-item {
        margin-bottom: 15px;

        .info-box {
          .title {
            font-size: 1.4rem;
          }

          .desc {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  .page-footer {
    padding: 15px;

    .web-footer {
      width: 100%;
      flex-direction: column;
      

      .link-wrap {
        width: 100%;
        padding-right: 0;
        margin-bottom: 15px;
        justify-content: space-between;

        .link-group {
          .group-title {
            font-size: 1.4rem;
          }

          .link-item a {
            font-size: 1.2rem;
          }
        }
      }

      .logo-wrap {
        width: 100%;
      }
    }
  }

  .link-info .top-info .icon-box img {
    width: 10rem;
    height: 10rem;
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/zujian/pageFooter.less"></style>
